/******************** 变量 ********************/
$text-color-hover-stroke: #1359bf;
$text-color-default-input: $text-color;
$text-color-focus-stroke: $primary-color-active;
$text-color-disabled-stroke: $text-color-disabled;

$background-color-hover-stroke: transparent;
$background-color-focus-stroke: transparent;
$background-color-active-stroke: transparent;
$background-color-disabled-stroke: $disabled-background;
$background-color-default-stroke: $input-background;

$border-color-active-input: $primary-color;
$border-color-focus-input: $primary-color;
$border-color-default-input: $border-color-base;
$border-color-hover-input: $border-color-hover;
$border-color-disabled-input: $border-color-disabled;

$filecontent-color-state: (default, $border-color-default-input, $background-color-default-stroke, $text-color-default-input),
  (hover, $border-color-hover-input, $background-color-hover-stroke, $text-color-hover-stroke),
  (focus, $border-color-focus-input, $background-color-focus-stroke, $text-color-focus-stroke),
  (active, $border-color-active-input, $background-color-active-stroke, $text-color-default-input),
  (disabled, $border-color-disabled-input, $background-color-disabled-stroke, $text-color-disabled-stroke) !default;

$filedrag-color-state: (default, $border-color-default-input, $background-color-default-stroke, default),
  (hover, $border-color-hover-input, $background-color-hover-stroke, default),
  (focus, $border-color-focus-input, $background-color-focus-stroke, default),
  (active, $border-color-active-input, $background-color-active-stroke, default),
  (disabled, $border-color-disabled-input, $background-color-disabled-stroke, default) !default;
/******************** mixin ********************/
@mixin defaultFileupload {
  .lv-fileupload-content {
    .lv-fileupload-list {
      min-height: 0.3rem;
      max-height: 0.92rem;
    }

    .lv-fileupload-add {
      max-height: 0.3rem;
      height: 0.3rem;
      width: 0.32rem;
    }
  }

  .lv-fileupload-null {
    height: 0.3rem;
    line-height: 0.3rem;
  }
}
@mixin largeFileupload {
  .lv-fileupload-content {
    .lv-fileupload-list {
      padding: 0.05rem;
      min-height: 0.38rem;
      max-height: 1rem;
    }

    .lv-fileupload-add {
      max-height: 0.38rem;
      height: 0.38rem;
    }
  }

  .lv-fileupload-null {
    height: 0.38rem;
    line-height: 0.38rem;
  }
}

/******************** 组件 ********************/

@include colorState('.lv-fileupload-content', $filecontent-color-state);
@include colorState('.lv-fileupload-drag', $filedrag-color-state);

.lv-fileupload {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $text-color;

  .lv-icon-color-state {
    @include motion-state;
  }

  &-size-large {
    @include largeFileupload;
  }
  .lv-custom-tooltip {
    display: block;
  }
}

.lv-fileupload-main {
  align-items: flex-start;
  width: 100%;
}

.lv-fileupload-content {
  flex: 1 1 auto;
  min-width: 0;
  border-width: $border-width-base;
  border-style: solid;
  border-radius: $border-radius-md;
  padding-right: 0.3rem;
  position: relative;
  cursor: pointer;

  @include motion-state;

  .lv-fileupload-list {
    min-height: 0.3rem;
    max-height: 0.92rem;
    overflow-y: auto;
    display: flex;
    overflow-x: hidden;
    flex-wrap: wrap;

    @include component-scroll;
  }

  .lv-fileupload-op {
    user-select: none;
  }

  .lv-fileupload-add {
    max-height: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    height: 0.3rem;
    width: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .lv-icon-host:not([disabled]) {
      color: $text-color;
    }
  }
}

.lv-fileupload-op {
  user-select: none;
  flex: none;
}

.lv-fileupload-main .lv-fileupload-op {
  margin-left: 0.08rem;
}

.lv-fileupload-null {
  height: 0.3rem;
  line-height: 0.3rem;
  color: $text-color-disabled-stroke;
  padding-left: $padding-sm;
}

.lv-fileupload-cell {
  position: relative;
  background: $upload-tag-item-fill;
  padding: 0 $padding-sm;
  border-radius: $border-radius-md;
  line-height: $height-sm;
  height: $height-sm;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.03rem;
  max-width: calc(100% - 0.04rem);
  overflow: hidden;

  &:not(.lv-fileupload-multiple) {
    width: 100%;
  }

  .lv-fileupload-progress {
    position: absolute;
    top: 0.23rem;
    left: 0;
    border-bottom: $border-width-base $border-style-base $border-color-active-input;
  }

  .lv-fileupload-file {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;

    .lv-fileupload-filename {
      color: $text-color;
    }
  }

  .lv-fileupload-fileunit {
    flex: 0 0 auto;
    color: $text-color;
  }

  .lv-fileupload-icon {
    flex-shrink: 0;
    margin-left: $margin-xs;
  }

  &.lv-fileupload-cell-error {
    border: $border-width-base $border-style-base $upload-border-color-error;
    background: rgba($upload-cell-color-bg-error, 0.1);
  }
}

.lv-fileupload-content:not(.disabled) {
  &.lv-fileupload-cell-error {
    border: $border-width-base $border-style-base $upload-border-color-error;
    background: rgba($upload-cell-color-bg-error, 0.1);
  }
}

.lv-fileupload-error-message {
  color: $status-color-error;
  font-size: 0.12rem;
}

// disabled
.lv-fileupload.lv-fileupload-disabled,
.lv-fileupload-content.lv-fileupload-content-disabled,
.lv-fileupload-add.lv-fileupload-add-disabled {
  cursor: not-allowed;
}

.lv-fileupload-content.lv-fileupload-content-disabled {
  background: $background-color-disabled-stroke;
  border-color: $upload-border-color-disabled;
}

.lv-fileupload.lv-fileupload-disabled {
  .lv-fileupload-cell {
    background-color: $background-color-disabled-stroke;

    .lv-fileupload-filename,
    .lv-fileupload-fileunit {
      color: $text-color-disabled;
    }

    &.lv-fileupload-cell-error {
      border: none;
    }
  }
  .lv-button.lv-button-type-default:not(.lv-button-loading) {
    &:disabled,
    &[disabled] {
      background: transparent;
    }
  }
}

// 拖拽类型
.lv-fileupload-draggable {
  width: 100%;

  // 拖拽面板
  .lv-fileupload-drag {
    width: 100%;
    min-height: 1.54rem;
    height: auto;
    border-width: $border-width-base;
    border-style: dashed;
    border-radius: $border-radius-md;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $padding-sm;
    cursor: pointer;

    @include motion-state;

    i {
      width: 0.32rem;
      height: $height-base;
    }

    .lv-fileupload-description {
      font-size: $font-size-base;
      font-weight: $font-weight-bold;
      line-height: 0.22rem;
      color: $text-color;
      padding-top: $padding-sm;
      text-align: center;
    }

    .lv-fileupload-text {
      font-size: 0.12rem;
      line-height: 0.18rem;
      color: $text-color-tertiary;
      text-align: center;
    }

    &-disabled {
      cursor: not-allowed;
      border-color: $border-color-disabled;
      background-color: $background-color-disabled-stroke;

      i {
        color: $icon-color-disabled;
        &:hover {
          color: $icon-color-disabled;
          cursor: not-allowed;
        }
      }

      div {
        opacity: 0.5;
      }
    }

    &.active {
      border-color: $primary-color;
    }
  }

  // 文件列表
  .lv-fileupload-list {
    margin-top: 0.05rem;

    .lv-fileupload-cell {
      margin: 0;
      margin-top: 0.03rem;
      max-width: 100%;
    }
  }
}

.lv-fileupload-picture-icon {
  width: 0.24rem;
  height: $height-sm;
}

.lv-fileupload-picture {
  display: flex;
  flex-wrap: wrap;

  .lv-fileupload-picture-list {
    display: flex;
    flex-wrap: wrap;

    .lv-fileupload-picture-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      line-height: $height-sm;
      border-radius: $border-radius-md;
      width: 0.96rem;
      height: 0.96rem;
      margin: 0 $margin-md 0 0;
      padding: $padding-sm;
      background-color: initial;
      border: $border-width-base $border-style-base $border-color-base;
      cursor: pointer;

      @include motion-state;

      &:hover .lv-fileupload-picture-item-action {
        opacity: 1;
      }

      .lv-fileupload-picture-item-action {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: hsla(0, 0%, 100%, 0.9);
        opacity: 0;

        @include motion-state;

        .lv-button {
          border: none;
          width: 0.24rem;
          min-width: 0.24rem;
          height: $height-sm;
          padding: 0;
        }
      }

      &.lv-fileupload-picture-item-error {
        flex-direction: column;
        background-color: $body-background;
        border: $border-width-base $border-style-base $error-color;
      }

      &.lv-fileupload-picture-item-progress {
        background-color: $body-background;
        cursor: default;
      }

      .lv-fileupload-picture-item-thumbnail {
        width: 100%;

        .lv-fileupload-picture-item-image {
          position: static;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .lv-fileupload-picture-trigger {
    width: 0.96rem;
    height: 0.96rem;
    overflow: hidden;

    &.lv-fileupload-picture-trigger-disabled {
      .lv-fileupload-picture-trigger-container {
        color: $text-color-disabled;
        background-color: $disabled-background;
        border-color: $border-color-disabled;
        cursor: not-allowed;
      }
    }
  }

  .lv-fileupload-picture-trigger-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: $border-radius-md;
    color: $text-color;
    background-color: initial;
    border: $border-width-base dashed $border-color-base;
    cursor: pointer;

    @include motion-state;

    &:active {
      color: $text-color;
      background-color: initial;
      border-color: $primary-color;
    }

    &:hover {
      color: $text-color;
      background-color: initial;
      border-color: $border-color-hover;
      cursor: pointer;
    }

    .lv-fileupload-picture-trigger-select {
      position: relative;
      padding: 0;
      top: 0;
      right: 0;
      line-height: 0.22rem;
      height: auto;
      border: none;
      color: $text-color-secondary;
      background-color: initial;
      cursor: pointer;
      .lv-icon-host {
        width: 0.32rem;
        height: $height-base;
      }
      .lv-button:not(:disabled) {
        .lv-icon-host {
          color: $text-color-secondary;
        }
      }
    }
  }
}
